<template>
  <div>
    <el-row class="left-top-area">
      <!--    左侧导航-->
      <div @click="type=1">
        <span class="parameter_sign iconfont icon-shujukongzhitai"></span>
        <p class="parameter_word" :class="{'click': type===1}">飞机坐标</p>
        <img src="~assets/img/experiment/experiment_line.png" class="parameter_line" v-show="type===1" alt="">
      </div>
      <div @click="type=2">
        <span class="parameter_setting_sign iconfont icon-shujukongzhitai"></span>
        <p class="parameter_setting_word" :class="{'click': type === 2}">坐标修改</p>
        <img src="~assets/img/experiment/experiment_line.png" class="parameter_setting_line" v-show="type===2" alt="">
      </div>
      <el-col>
        <div class="plane_list" v-show="type===1">
          <div class="plane_table">
            <el-table
              :data="$store.state.ex1.tableData"
              class="plane_table"
              border
              :row-style="{height: '0'}"
              :fit='true'>
              <!--              :cell-style="{padding: '0'}"-->
              <el-table-column
                prop="planeNo"
                align="center"
                label="编号"
                min-width="1">
              </el-table-column>
              <el-table-column
                prop="posx"
                align="center"
                label="x"
                min-width="1">
              </el-table-column>
              <el-table-column
                prop="posy"
                align="center"
                label="y"
                min-width="1">
              </el-table-column>
              <el-table-column
                prop="posz"
                align="center"
                label="z"
                min-width="1">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="paraments" v-show="type===2">
          <el-col :gutter="2">
            <el-row style="margin-top:5px">
              <el-col :offset="2">
                <span class="coordinate_item">无人机编号：PL</span>
                <span class="coordinate_item">{{ $store.state.ex1.choose_num }}</span>
              </el-col>
            </el-row>

            <el-row style="margin-top:5px">
              <el-col :span="1" :offset="2">
                <span class="coordinate_item">x:</span>
              </el-col>
              <el-col :span="2" :offset="2">
                <el-input v-model="plane_x" size="small" style="width: 10vw"></el-input>
              </el-col>
            </el-row>

            <el-row style="margin-top:5px">
              <el-col :span="1" :offset="2">
                <span class="coordinate_item">y:</span>
              </el-col>
              <el-col :span="2" :offset="2">
                <el-input v-model="plane_y" size="small" style="width: 10vw"></el-input>
              </el-col>
            </el-row>

            <el-row style="margin-top:5px">
              <el-col :span="1" :offset="2">
                <span class="coordinate_item">z:</span>
              </el-col>
              <el-col :span="2" :offset="2">
                <el-input v-model="plane_z" size="small" style="width: 10vw"></el-input>
              </el-col>
            </el-row>
            <el-row :span="2" style="margin-top:5px; float: right;">
              <button class="btn_pos" @click="poschange">修改坐标</button>
            </el-row>
          </el-col>
        </div>
      </el-col>
    </el-row>
    <!--  按钮区-->
    <div class="button_area">
      <button type="button" class="hint_button" @click="showHint">
        <span class="iconfont icon-icon"></span>
        <span class="button_word">查看提示</span>
      </button>

      <button type="button" class="reset_button" @click="reset">
        <span class="iconfont icon-reset"></span>
        <span class="button_word">重新实验</span>
      </button>

      <button type="button" class="finish_button" @click="finish">
        <span class="iconfont icon-wancheng" style="color: #FFFFFF"></span>
        <span class="button_word" style="color: #ffffff">完成实验</span>
      </button>

      <button type="button" class="back_button" @click="save">
        <span class="iconfont icon-fanhui"></span>
        <span class="button_word">保存并返回</span>
      </button>
    </div>

    <el-dialog
      :visible.sync="dialogHintVisible"
      width="800"
      height="480"
      :before-close="handleCloseHint"
      :modal-append-to-body='false'>

      <p style="font-size: 20px; text-align: center">H型坐标</p>
      <div class="hint">
        <img src="~assets/img/experiment/notice/ex1_notice.png" alt="步骤一提示信息">
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogHintVisible = false">关闭</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import {EventBus} from 'assets/js/experiment/ex1/eventBus'
import {savePos, clear} from "network/experiment/experiment";

export default {
  name: "ex1_left",
  inject: ['reload'],
  data() {
    return {
      type: 1,
      dialogHintVisible: false
    }
  },
  computed: {
    plane_x: {
      get() {
        return this.$store.state.ex1.plane_x
      },
      set(value) {
        this.$store.commit('changeEx1PlaneX', value)
      }
    },
    plane_y: {
      get() {
        return this.$store.state.ex1.plane_y
      },
      set(value) {
        this.$store.commit('changeEx1PlaneY', value)
      }
    },
    plane_z: {
      get() {
        return this.$store.state.ex1.plane_z
      },
      set(value) {
        this.$store.commit('changeEx1PlaneZ', value)
      }
    },
  },
  methods: {
    handleCloseHint() {
      this.dialogHintVisible = false;
    },
    showHint() {
      this.dialogHintVisible = true;
    },
    reset() {
      clear(1)
        .then(res => {
          this.$message({
            message: '重置成功',
            type: 'success',
            duration: 1000,
            offset: 50
          });
          setTimeout(this.reload, 1000);
        })
    },
    finish() {
      EventBus.$emit('finish')
    },
    save() {
      savePos(this.$store.state.ex1.planeArr)
        .then(res => {
          this.$message({
            message: '保存成功！',
            type: 'success',
            duration: 1000,
            offset: 50
          });
          setTimeout(this.closeExperiment, 1000);
        })
    },
    poschange() {
      EventBus.$emit('ex1_poschange', 0);
    },
    closeExperiment() {
      this.$emit('changeExperimentNo', 0)
    },
  }
}
</script>

<style scoped>
@import "../../../assets/css/experiment/ex1/ex1_left.css";
</style>
